<template>
    <view>
        <!-- pages/profile/profile.wxml -->
        <view>
            <view class="title-box">
                <view class="user-image"></view>
                <view class="user-name">用户名</view>
            </view>
        </view>
        <view class="history">
            <view>
                <text class="number">0</text>
                <text class="name">收藏的店铺</text>
            </view>
            <view @tap="goToCollectPage">
                <text class="number">{{ collectGoods.length }}</text>
                <text class="name">收藏的商品</text>
            </view>
            <view>
                <text class="number">0</text>
                <text class="name">关注的商品</text>
            </view>
            <view>
                <text class="number">0</text>
                <text class="name">我的足迹</text>
            </view>
        </view>
        <view class="setting-box">
            <view class="my-order" @tap="goToOrderPage">我的订单</view>
            <view class="order-box" @tap="goToOrderPage">
                <view>
                    <text>全部订单</text>
                </view>
                <view>
                    <text>待付款</text>
                </view>
                <view>
                    <text>待收货</text>
                </view>
                <view>
                    <text>退款/退货</text>
                </view>
            </view>
            <view class="adress">
                收货地址管理
                <text style="margin-left: 450rpx; color: rgb(214, 210, 210)">></text>
            </view>
            <view class="customer">
                联系客服
                <text>400-618-400</text>
            </view>
            <view class="feedback">
                意见反馈
                <text style="margin-left: 515rpx; color: rgb(214, 210, 210)">></text>
            </view>
            <view class="about-us">
                关于我们
                <text style="margin-left: 515rpx; color: rgb(214, 210, 210)">></text>
            </view>
            <view class="share">
                把应用推荐给其他人
                <text style="margin-left: 350rpx; color: rgb(214, 210, 210)">></text>
            </view>
        </view>
    </view>
</template>

<script>
// pages/profile/profile.js
export default {
    data() {
        return {
            collectGoods: []
        };
    },
    onLoad: function () {
        this.loadCollectGoods();
    },
    onShow: function () {
        this.loadCollectGoods();
    },
    methods: {
        loadCollectGoods: function () {
            const collectList = uni.getStorageSync('collectList') || {};
            const goodsIds = Object.keys(collectList).filter((goodsId) => collectList[goodsId]);
            this.setData({
                collectGoods: goodsIds.map((goodsId) => ({
                    goods_id: goodsId
                }))
            });
        },

        goToCollectPage: function () {
            uni.navigateTo({
                url: '/pages/collect/collect'
            });
        },

        goToOrderPage: function () {
            uni.navigateTo({
                url: '/pages/order/order'
            });
        }
    }
};
</script>
<style>
/* pages/profile/profile.wxss */
.title-box {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 500rpx;
    background-color: wheat;
}
.user-image {
    margin: 0 auto 35rpx;
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
    background-color: black;
}
.user-name {
    width: 100%;
    text-align: center;
    color: white;
    font-size: larger;
}
.history {
    display: flex;
    justify-content: space-around;
    width: 95%;
    height: 150rpx;
    background-color: white;
    position: absolute;
    top: 425rpx;
    left: 2.5%;
    font-size: larger;
}
.history view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.number {
    color: rgb(182, 4, 4);
}
.setting-box {
    width: 100%;
    height: 1000rpx;
    background-color: rgb(240, 235, 235);
}
.my-order {
    width: 92.5%;
    height: 100rpx;
    position: absolute;
    top: 600rpx;
    left: 2.5%;
    padding-left: 20rpx;
    font-size: larger;
    line-height: 100rpx;
    background-color: white;
}
.order-box {
    display: flex;
    justify-content: space-around;
    width: 95%;
    height: 150rpx;
    position: absolute;
    background-color: white;
    top: 701rpx;
    left: 2.5%;
    font-size: larger;
}
.order-box view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.adress {
    width: 92.5%;
    height: 100rpx;
    position: absolute;
    background-color: white;
    top: 875rpx;
    left: 2.5%;
    padding-left: 20rpx;
    font-size: larger;
    line-height: 100rpx;
}
.customer {
    width: 92.5%;
    height: 100rpx;
    position: absolute;
    background-color: white;
    top: 1000rpx;
    left: 2.5%;
    padding-left: 20rpx;
    font-size: larger;
    line-height: 100rpx;
}
.customer text {
    margin-left: 325rpx;
}
.feedback {
    width: 92.5%;
    height: 100rpx;
    position: absolute;
    background-color: white;
    top: 1100rpx;
    left: 2.5%;
    padding-left: 20rpx;
    font-size: larger;
    line-height: 100rpx;
}
.about-us {
    width: 92.5%;
    height: 100rpx;
    position: absolute;
    background-color: white;
    top: 1200rpx;
    left: 2.5%;
    padding-left: 20rpx;
    font-size: larger;
    line-height: 100rpx;
}
.share {
    width: 92.5%;
    height: 100rpx;
    position: absolute;
    background-color: white;
    top: 1325rpx;
    left: 2.5%;
    padding-left: 20rpx;
    font-size: larger;
    line-height: 100rpx;
}
</style>
